<template>
  <div class="app-container" style="padding-top: 5px">
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(item, index) in categoryList"
        :key="index"
        :label="item.categoryName"
        :name="String(item.categoryValue)"
      >
      </el-tab-pane>
    </el-tabs>
    <el-row :gutter="10" class="mb-8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['service:market:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="_openDialog()"
          >添加服务</el-button
        >
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="tableList">
      <el-table-column label="序号" type="index" align="center">
        <template slot-scope="scope">
          <span>{{
            (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="服务图标" align="center" width="100">
        <template slot-scope="{ row }">
          <image-preview :src="row.serviceIcon" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column
        label="服务名称"
        align="center"
        prop="serviceName"
        width="150"
      ></el-table-column>
      <el-table-column
        label="服务描述"
        align="center"
        prop="serviceDesc"
        width="200"
      ></el-table-column>
      <el-table-column label="服务类别" align="center">
        <template slot-scope="{ row }">
          {{ findValue(row.serviceType) }}
        </template>
      </el-table-column>
      <el-table-column label="收费方式" align="center">
        <template slot-scope="{ row }">
          {{ row.openType === 0 ? "免费" : "付费" }}
        </template>
      </el-table-column>
      <el-table-column
        label="发布机构"
        align="center"
        prop="serviceCompanyName"
      ></el-table-column>

      <el-table-column label="开通状态" align="center">
        <template slot-scope="{ row }">
          {{ row.openStatus === 1 ? "已开通" : "未开通" }}
        </template>
      </el-table-column>
      <el-table-column label="可用范围" align="center">
        <template slot-scope="{ row }">
          {{ row.openRange === 0 ? "全员" : "指定" }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="{ row }">
          <el-button
            v-hasPermi="['service:market:status']"
            size="mini"
            type="text"
            icon="el-icon-coordinate"
            @click="upStatus(row.openStatus, row.id)"
            >{{ row.openStatus === 1 ? "停用" : "启用" }}</el-button
          >
          <el-button
            v-hasPermi="['service:market:edit']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="_openDialog(row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="添加服务"
      :visible.sync="dialogShow"
      width="600px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :show-message="false"
        label-width="100px"
      >
        <el-form-item label="服务类别" required>
          <el-cascader
            style="width: 100%"
            v-model="form.serviceValue"
            placeholder="请选择服务类别"
            :options="categoryList"
            :props="{
              children: 'itemList',
              label: 'categoryName',
              value: 'categoryValue',
            }"
          ></el-cascader>
        </el-form-item>

        <el-form-item label="服务名称" prop="serviceName" required>
          <el-input
            v-model="form.serviceName"
            placeholder="请输入服务名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务描述" prop="serviceDesc" required>
          <el-input
            v-model="form.serviceDesc"
            placeholder="请输入服务描述,最多20个字符"
            :maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务图标" prop="serviceIcon" required>
          <ImageUpload v-model="form.serviceIcon" cropper />
        </el-form-item>
        <el-form-item label="服务简介" prop="serviceRemark">
          <el-input
            v-model="form.serviceRemark"
            type="textarea"
            :rows="3"
            placeholder="请输入服务简介"
          />
        </el-form-item>
        <el-form-item label="服务详情" prop="serviceDetail">
          <Editor ref="editor" :height="150" :value="form.serviceDetail" />
        </el-form-item>
        <el-form-item label="是否收费" prop="openType">
          <el-radio-group v-model="form.openType">
            <el-radio :label="0">免费订购</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="tc">
          <el-button type="primary" size="small" @click="_addService"
            >确 定</el-button
          >
          <el-button size="small" @click="dialogShow = false">取 消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getServiceCategoryList,
  getServiceList,
  addService,
  updateService,
  updateServiceStatus,
} from "@/api/service";
import ImageUpload from "@/components/ImageUpload";

export default {
  name: "Market",
  components: {
    ImageUpload,
  },
  data() {
    return {
      categoryList: [],
      activeName: null,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableList: [],

      dialogShow: false,
      form: {},
    };
  },
  created() {
    this.getCategoryList();
    this.getList();
  },
  activated() {
    this.getList();
  },
  methods: {
    getList() {
      getServiceList(this.queryParams).then((response) => {
        this.tableList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 获取tabs服务类别
    getCategoryList() {
      getServiceCategoryList().then((res) => {
        this.categoryList = res.rows;
        if (res.rows.length) {
          this.activeName = String(res.rows[0].categoryValue);
        }
      });
    },
    // 获取服务类别
    findValue(val) {
      if (!this.categoryList.length) return;
      return this.categoryList.find((v) => {
        return v.categoryValue === val;
      }).categoryName;
    },
    // 修改状态 status === 1 ? '已开通' : '未开通'
    upStatus(status, id) {
      let params = {
        dealType: status ? 0 : 1, // 1开通 0关闭
        companyServiceId: id,
      };
      this.$confirm(
        `此操作将${params.dealType ? "启用" : "停用"}该服务,是否确定操作`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        updateServiceStatus(params).then((res) => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.getList();
        });
      });
    },
    _openDialog(row) {
      this.form = {
        serviceType: "", // 一级 categoryValue
        serviceValue: "", // 二级 categoryValue
        serviceName: "",
        serviceDesc: "",
        serviceIcon: "",
        serviceMaxicon: "", // 大图标
        serviceRemark: "",
        serviceDetail: "",
        openType: 0, // 开通方式0免费开通1付费开通
      };
      if (row && row.id) {
        this.form = JSON.parse(JSON.stringify(row));
        this.form.serviceValue = [row.serviceType, row.serviceValue];
      }
      this.dialogShow = true;
    },
    // 添加服务
    _addService() {
      this.$refs.form.validate((valid) => {
        let params = JSON.parse(JSON.stringify(this.form));
        params.serviceType = this.form.serviceValue[0];
        params.serviceValue = this.form.serviceValue[1];
        params.serviceMaxicon = params.serviceIcon;
        params.serviceDetail = this.$refs.editor.currentValue;
        console.log(JSON.parse(JSON.stringify(params)));
        if (
          !valid ||
          (!params.serviceType && params.serviceType !== 0) ||
          (!params.serviceValue && params.serviceValue !== 0)
        ) {
          this.$message.error("请完善必填项");
        } else {
          if (params.id) {
            updateService(params).then((res) => {
              this.$message.success("修改成功");
              this.dialogShow = false;
              this.getList();
            });
          } else {
            addService(params).then((res) => {
              this.$message.success("新增成功");
              this.dialogShow = false;
              this.getList();
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped>
.disFlxAC >>> .el-tabs__header {
  margin-bottom: 0;
}
</style>
